<!--<template>-->
<!--  <div class="user-list-container">-->
<!--    <div class="filter-container">-->
<!--      <el-input-->
<!--          v-model="listQuery.username"-->
<!--          placeholder="用户名"-->
<!--          style="width: 200px;"-->
<!--          class="filter-item"-->
<!--          @keyup.enter.native="handleFilter"-->
<!--      />-->
<!--      <el-select-->
<!--          v-model="listQuery.status"-->
<!--          placeholder="状态"-->
<!--          clearable-->
<!--          style="width: 120px"-->
<!--          class="filter-item"-->
<!--      >-->
<!--        <el-option-->
<!--            v-for="item in statusOptions"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value"-->
<!--        />-->
<!--      </el-select>-->
<!--      <el-button-->
<!--          class="filter-item"-->
<!--          type="primary"-->
<!--          icon="el-icon-search"-->
<!--          @click="handleFilter"-->
<!--      >-->
<!--        搜索-->
<!--      </el-button>-->
<!--      <el-button-->
<!--          class="filter-item"-->
<!--          type="primary"-->
<!--          icon="el-icon-plus"-->
<!--          @click="handleCreate"-->
<!--      >-->
<!--        新增用户-->
<!--      </el-button>-->
<!--    </div>-->

<!--    <el-table-->
<!--        v-loading="listLoading"-->
<!--        :data="list"-->
<!--        border-->
<!--        fit-->
<!--        highlight-current-row-->
<!--        style="width: 100%;"-->
<!--    >-->
<!--      <el-table-column label="ID" prop="id" align="center" width="80">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.id }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="用户名" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.username }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="昵称" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.nickname }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="角色" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-tag v-for="role in row.roles" :key="role.id" style="margin-right: 5px;">-->
<!--            {{ role.name }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="状态" align="center" width="100">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-tag :type="row.status | statusFilter">-->
<!--            {{ row.status | statusTextFilter }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="创建时间" align="center" width="180">-->
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.createTime | parseTime }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-button type="primary" size="mini" @click="handleUpdate(row)">-->
<!--            编辑-->
<!--          </el-button>-->
<!--          <el-button-->
<!--              v-if="row.status!='deleted'"-->
<!--              size="mini"-->
<!--              :type="row.status==='disabled'?'success':'danger'"-->
<!--              @click="handleModifyStatus(row,row.status==='disabled'?'enabled':'disabled')"-->
<!--          >-->
<!--            {{ row.status==='disabled'?'启用':'禁用' }}-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    <pagination-->
<!--        v-show="total>0"-->
<!--        :total="total"-->
<!--        :page.sync="listQuery.page"-->
<!--        :limit.sync="listQuery.limit"-->
<!--        @pagination="getList"-->
<!--    />-->

<!--    &lt;!&ndash; 新增/编辑对话框 &ndash;&gt;-->
<!--    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
<!--      <el-form-->
<!--          ref="dataForm"-->
<!--          :rules="rules"-->
<!--          :model="temp"-->
<!--          label-position="left"-->
<!--          label-width="80px"-->
<!--          style="width: 400px; margin-left:50px;"-->
<!--      >-->
<!--        <el-form-item label="用户名" prop="username">-->
<!--          <el-input v-model="temp.username" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="昵称" prop="nickname">-->
<!--          <el-input v-model="temp.nickname" />-->
<!--        </el-form-item>-->
<!--        <el-form-item v-if="dialogStatus==='create'" label="密码" prop="password">-->
<!--          <el-input v-model="temp.password" type="password" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="角色" prop="roles">-->
<!--          <el-select-->
<!--              v-model="temp.roles"-->
<!--              multiple-->
<!--              placeholder="请选择"-->
<!--              style="width: 100%"-->
<!--          >-->
<!--            <el-option-->
<!--                v-for="item in roleOptions"-->
<!--                :key="item.id"-->
<!--                :label="item.name"-->
<!--                :value="item.id"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态" prop="status">-->
<!--          <el-radio-group v-model="temp.status">-->
<!--            <el-radio label="enabled">启用</el-radio>-->
<!--            <el-radio label="disabled">禁用</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">-->
<!--          取消-->
<!--        </el-button>-->
<!--        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">-->
<!--          确认-->
<!--        </el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { fetchUserList, createUser, updateUser, deleteUser } from '@/api/user'-->
<!--import { fetchRoleList } from '@/api/role'-->
<!--import Pagination from '@/components/Pagination'-->

<!--export default {-->
<!--  name: 'UserList',-->
<!--  components: { Pagination },-->
<!--  filters: {-->
<!--    statusFilter(status) {-->
<!--      const statusMap = {-->
<!--        enabled: 'success',-->
<!--        disabled: 'danger',-->
<!--        deleted: 'info'-->
<!--      }-->
<!--      return statusMap[status]-->
<!--    },-->
<!--    statusTextFilter(status) {-->
<!--      const statusTextMap = {-->
<!--        enabled: '启用',-->
<!--        disabled: '禁用',-->
<!--        deleted: '删除'-->
<!--      }-->
<!--      return statusTextMap[status]-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      list: null,-->
<!--      total: 0,-->
<!--      listLoading: true,-->
<!--      listQuery: {-->
<!--        page: 1,-->
<!--        limit: 20,-->
<!--        username: undefined,-->
<!--        status: undefined-->
<!--      },-->
<!--      statusOptions: [-->
<!--        { value: 'enabled', label: '启用' },-->
<!--        { value: 'disabled', label: '禁用' }-->
<!--      ],-->
<!--      roleOptions: [],-->
<!--      temp: {-->
<!--        id: undefined,-->
<!--        username: '',-->
<!--        nickname: '',-->
<!--        password: '',-->
<!--        roles: [],-->
<!--        status: 'enabled'-->
<!--      },-->
<!--      dialogFormVisible: false,-->
<!--      dialogStatus: '',-->
<!--      textMap: {-->
<!--        update: '编辑用户',-->
<!--        create: '新增用户'-->
<!--      },-->
<!--      rules: {-->
<!--        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],-->
<!--        nickname: [{ required: true, message: '昵称不能为空', trigger: 'blur' }],-->
<!--        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],-->
<!--        roles: [{ required: true, message: '请至少选择一个角色', trigger: 'change' }]-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.getList()-->
<!--    this.getRoleOptions()-->
<!--  },-->
<!--  methods: {-->
<!--    getList() {-->
<!--      this.listLoading = true-->
<!--      fetchUserList(this.listQuery).then(response => {-->
<!--        this.list = response.data.items-->
<!--        this.total = response.data.total-->
<!--        this.listLoading = false-->
<!--      })-->
<!--    },-->
<!--    getRoleOptions() {-->
<!--      fetchRoleList({ page: 1, limit: 1000 }).then(response => {-->
<!--        this.roleOptions = response.data.items-->
<!--      })-->
<!--    },-->
<!--    handleFilter() {-->
<!--      this.listQuery.page = 1-->
<!--      this.getList()-->
<!--    },-->
<!--    resetTemp() {-->
<!--      this.temp = {-->
<!--        id: undefined,-->
<!--        username: '',-->
<!--        nickname: '',-->
<!--        password: '',-->
<!--        roles: [],-->
<!--        status: 'enabled'-->
<!--      }-->
<!--    },-->
<!--    handleCreate() {-->
<!--      this.resetTemp()-->
<!--      this.dialogStatus = 'create'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->
<!--    createData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          createUser(this.temp).then(() => {-->
<!--            this.dialogFormVisible = false-->
<!--            this.$notify({-->
<!--              title: '成功',-->
<!--              message: '创建成功',-->
<!--              type: 'success',-->
<!--              duration: 2000-->
<!--            })-->
<!--            this.getList()-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleUpdate(row) {-->
<!--      this.temp = Object.assign({}, row) // copy obj-->
<!--      this.temp.roles = row.roles.map(role => role.id)-->
<!--      this.dialogStatus = 'update'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->
<!--    updateData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          const tempData = Object.assign({}, this.temp)-->
<!--          updateUser(tempData).then(() => {-->
<!--            this.dialogFormVisible = false-->
<!--            this.$notify({-->
<!--              title: '成功',-->
<!--              message: '更新成功',-->
<!--              type: 'success',-->
<!--              duration: 2000-->
<!--            })-->
<!--            this.getList()-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleModifyStatus(row, status) {-->
<!--      this.$confirm('确认要' + (status === 'enabled' ? '启用' : '禁用') + '该用户吗?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--      }).then(() => {-->
<!--        const tempData = Object.assign({}, row)-->
<!--        tempData.status = status-->
<!--        updateUser(tempData).then(() => {-->
<!--          this.$notify({-->
<!--            title: '成功',-->
<!--            message: '状态更新成功',-->
<!--            type: 'success',-->
<!--            duration: 2000-->
<!--          })-->
<!--          this.getList()-->
<!--        })-->
<!--      }).catch(() => {-->
<!--        this.$message({-->
<!--          type: 'info',-->
<!--          message: '已取消操作'-->
<!--        })-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.filter-container {-->
<!--  margin-bottom: 20px;-->
<!--}-->
<!--.filter-item {-->
<!--  margin-right: 10px;-->
<!--}-->
<!--</style>-->























<!--<template>-->
<!--  <div class="user-list-container">-->
<!--    <div class="filter-container">-->
<!--      <el-input v-model="listQuery.username" placeholder="用户名" style="width: 200px;" class="filter-item" />-->
<!--      <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 120px" class="filter-item">-->
<!--        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />-->
<!--      </el-select>-->
<!--      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>-->
<!--      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">新增用户</el-button>-->
<!--    </div>-->

<!--    <el-table-->
<!--        :data="list"-->
<!--        border-->
<!--        fit-->
<!--        highlight-current-row-->
<!--        style="width: 100%;"-->
<!--    >-->
<!--      <el-table-column label="ID" prop="id" align="center" width="80" />-->
<!--      <el-table-column label="用户名" prop="username" align="center" />-->
<!--      <el-table-column label="密码" prop="password" align="center" />-->
<!--      <el-table-column label="手机号" prop="phone" align="center" />-->
<!--      <el-table-column label="邮箱" prop="email" align="center" />-->
<!--      <el-table-column label="状态" prop="status" align="center">-->
<!--        <template slot-scope="{row}">-->
<!--          <el-tag :type="row.status | statusFilter">{{ row.status | statusTextFilter }}</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="权限" prop="createTime" align="center" />-->
<!--      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="{row}">-->
<!--&lt;!&ndash;          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>&ndash;&gt;-->
<!--          <el-button v-if="row.status!='deleted'" size="mini" :type="row.status=='disabled'?'success':'danger'" @click="handleModifyStatus(row,row.status=='disabled'?'enabled':'disabled')">-->
<!--            {{ row.status=='disabled'?'启用':'禁用' }}-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

<!--    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">-->
<!--      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">-->
<!--        <el-form-item label="用户名" prop="username">-->
<!--          <el-input v-model="temp.username" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="密码" prop="password">-->
<!--          <el-input v-model="temp.password" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="手机号" prop="phone">-->
<!--          <el-input v-model="temp.phone" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="邮箱" prop="email">-->
<!--          <el-input v-model="temp.email" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态">-->
<!--          <el-select v-model="temp.status" class="filter-item" placeholder="请选择">-->
<!--            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogFormVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确定</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import Pagination from '@/components/Pagination'-->
<!--import { fetchUserList, createUser, updateUser } from '@/api/user'-->

<!--export default {-->
<!--  name: 'UserList',-->
<!--  components: { Pagination },-->
<!--  filters: {-->
<!--    statusFilter(status) {-->
<!--      const statusMap = {-->
<!--        enabled: 'success',-->
<!--        disabled: 'danger',-->
<!--        deleted: 'info'-->
<!--      }-->
<!--      return statusMap[status]-->
<!--    },-->
<!--    statusTextFilter(status) {-->
<!--      const statusTextMap = {-->
<!--        enabled: '启用',-->
<!--        disabled: '禁用',-->
<!--        deleted: '删除'-->
<!--      }-->
<!--      return statusTextMap[status]-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      list: null,-->
<!--      total: 0,-->
<!--      listQuery: {-->
<!--        page: 1,-->
<!--        limit: 20,-->
<!--        username: undefined,-->
<!--        status: undefined-->
<!--      },-->
<!--      statusOptions: [-->
<!--        { value: 'enabled', label: '启用' },-->
<!--        { value: 'disabled', label: '禁用' }-->
<!--      ],-->
<!--      temp: {-->
<!--        id: undefined,-->
<!--        username: '',-->
<!--        password: '',-->
<!--        phone: '',-->
<!--        email: '',-->
<!--        status: 'enabled'-->
<!--      },-->
<!--      dialogFormVisible: false,-->
<!--      dialogStatus: '',-->
<!--      textMap: {-->
<!--        update: '编辑用户',-->
<!--        create: '新增用户'-->
<!--      },-->
<!--      rules: {-->
<!--        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],-->
<!--        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    this.getList()-->
<!--  },-->
<!--  methods: {-->
<!--    getList() {-->
<!--      // 模拟API请求-->
<!--      const mockData = {-->
<!--        code: 200,-->
<!--        data: {-->
<!--          total: 25,-->
<!--          items: Array.from({ length: 10 }, (_, i) => ({-->
<!--            id: i + 1,-->
<!--            username: `user${i + 1}`,-->
<!--            password: `${i + 1}`,-->
<!--            phone: `1380013800${i}`,-->
<!--            email: `user${i + 1}@example.com`,-->
<!--            status: Math.random() > 0.3 ? 'enabled' : 'disabled',-->
<!--            createTime: new Date().toLocaleString()-->
<!--          }))-->
<!--        }-->
<!--      }-->

<!--      this.list = mockData.data.items-->
<!--      this.total = mockData.data.total-->
<!--    },-->
<!--    handleFilter() {-->
<!--      this.listQuery.page = 1-->
<!--      this.getList()-->
<!--    },-->

<!--    resetTemp() {-->
<!--      this.temp = {-->
<!--        id: undefined,-->
<!--        username: '',-->
<!--        nickname: '',-->
<!--        phone: '',-->
<!--        email: '',-->
<!--        status: 'enabled'-->
<!--      }-->
<!--    },-->

<!--    handleCreate() {-->
<!--      this.resetTemp()-->
<!--      this.dialogStatus = 'create'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->

<!--    createData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          // 模拟创建用户-->
<!--          this.temp.id = parseInt(Math.random() * 100) + 1024-->
<!--          this.temp.createTime = new Date().toLocaleString()-->
<!--          this.list.unshift(this.temp)-->
<!--          this.dialogFormVisible = false-->
<!--          this.$notify({-->
<!--            title: '成功',-->
<!--            message: '创建成功',-->
<!--            type: 'success',-->
<!--            duration: 2000-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->

<!--    handleUpdate(row) {-->
<!--      this.temp = Object.assign({}, row) // copy obj-->
<!--      this.dialogStatus = 'update'-->
<!--      this.dialogFormVisible = true-->
<!--      this.$nextTick(() => {-->
<!--        this.$refs['dataForm'].clearValidate()-->
<!--      })-->
<!--    },-->
<!--    updateData() {-->
<!--      this.$refs['dataForm'].validate((valid) => {-->
<!--        if (valid) {-->
<!--          // 模拟更新用户-->
<!--          const index = this.list.findIndex(v => v.id === this.temp.id)-->
<!--          this.list.splice(index, 1, this.temp)-->
<!--          this.dialogFormVisible = false-->
<!--          this.$notify({-->
<!--            title: '成功',-->
<!--            message: '更新成功',-->
<!--            type: 'success',-->
<!--            duration: 2000-->
<!--          })-->
<!--        }-->
<!--      })-->
<!--    },-->
<!--    handleModifyStatus(row, status) {-->
<!--      // 模拟修改状态-->
<!--      const index = this.list.findIndex(v => v.id === row.id)-->
<!--      this.list[index].status = status-->
<!--      this.$notify({-->
<!--        title: '成功',-->
<!--        message: '状态更新成功',-->
<!--        type: 'success',-->
<!--        duration: 2000-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style scoped>-->
<!--.filter-container {-->
<!--  margin-bottom: 20px;-->
<!--}-->
<!--.filter-item {-->
<!--  margin-right: 10px;-->
<!--}-->
<!--</style>-->














<template>
  <div class="user-list-container">
    <div class="filter-container">
      <el-input v-model="listQuery.username" placeholder="用户名" style="width: 200px;" class="filter-item" />
      <el-select v-model="listQuery.role" placeholder="权限" clearable style="width: 120px" class="filter-item">
        <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 120px" class="filter-item">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>

    <el-table
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center" width="80" />
      <el-table-column label="用户名" prop="username" align="center" />
      <el-table-column label="密码" prop="password" align="center">
        <template slot-scope="{row}">
          <span
              @click="togglePasswordVisibility(row)"
              style="cursor: pointer;"
          >
            <i class="el-icon-view" style="margin-right: 5px;"></i>
            <span v-if="row.showPassword">{{ row.password }}</span>
            <span v-else>{{ row.password.replace(/./g, '*') }}</span>
          </span>
        </template>
<!--        <template slot-scope="{row}">-->
<!--          <span>{{ row.password.replace(/./g, '*') }}</span>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="手机号" prop="phone" align="center" />
      <el-table-column label="邮箱" prop="email" align="center" />
      <el-table-column label="权限" prop="role" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.role === 'admin' ? 'danger' : ''">
            {{ row.role === 'admin' ? '管理员' : '普通用户' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">{{ row.status | statusTextFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button
              size="mini"
              :type="row.status=='disabled'?'success':'danger'"
              @click="handleModifyStatus(row,row.status=='disabled'?'enabled':'disabled')"
          >
            {{ row.status=='disabled'?'启用':'禁用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  name: 'UserList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        enabled: 'success',
        disabled: 'danger',
        deleted: 'info'
      }
      return statusMap[status]
    },
    statusTextFilter(status) {
      const statusTextMap = {
        enabled: '启用',
        disabled: '禁用',
        deleted: '删除'
      }
      return statusTextMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        username: undefined,
        role: undefined,
        status: undefined
      },
      statusOptions: [
        { value: 'enabled', label: '启用' },
        { value: 'disabled', label: '禁用' }
      ],
      roleOptions: [
        { value: 'user', label: '普通用户' },
        { value: 'admin', label: '管理员' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    togglePasswordVisibility(row) {
      this.$set(row, 'showPassword', !row.showPassword)
    },
    getList() {
      // 模拟API请求
      const mockData = {
        code: 200,
        data: {
          total: 25,
          items: Array.from({ length: 10 }, (_, i) => ({
            id: i + 1,
            username: `user${i + 1}`,
            password: 'password123', // 实际密码，显示时会转换为星号
            phone: `1380013800${i}`,
            email: `user${i + 1}@example.com`,
            role: i % 3 === 0 ? 'admin' : 'user', // 每3个用户中1个是管理员
            status: Math.random() > 0.3 ? 'enabled' : 'disabled'
          }))
        }
      }

      // 模拟筛选
      let items = mockData.data.items
      if (this.listQuery.username) {
        items = items.filter(item => item.username.includes(this.listQuery.username))
      }
      if (this.listQuery.role) {
        items = items.filter(item => item.role === this.listQuery.role)
      }
      if (this.listQuery.status) {
        items = items.filter(item => item.status === this.listQuery.status)
      }

      this.list = items
      this.total = mockData.data.total
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleModifyStatus(row, status) {
      // 模拟修改状态
      const index = this.list.findIndex(v => v.id === row.id)
      this.list[index].status = status
      this.$notify({
        title: '成功',
        message: '状态更新成功',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}
.filter-item {
  margin-right: 10px;
}
</style>